<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
       <el-form :model="requestParameters" ref="requestParameters">
         <div class="filter-container">
           <el-row :gutter="20">
             <el-col :span="3">
               <el-form-item  prop="province">
                 <el-select
                   class="filter-item"
                   style="width: 180px;"
                   v-model="requestParameters.province"
                   @keyup.enter="handleFilter"
                   filterable
                   placeholder="选择时间类型"
                 >
                   <el-option
                     :key="item"
                     :label="item"
                     :value="item"
                   ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="3">
               <el-form-item prop="province">
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
               </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="3">
              <el-form-item  prop="province">
                <el-select
                 class="filter-item"
                 style="width:180px;"
                 v-model="requestParameters.province"
                 @keyup.enter="handleFilter"
                 filterable
                 placeholder="选择角色类型"
               >
                  <el-option
                   :key="item"
                   :label="item"
                   :value="item"
                 ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item  prop="province">
                <el-select
                 class="filter-item"
                 style="width: 180px;"
                 v-model="requestParameters.province"
                 @keyup.enter="handleFilter"
                 filterable
                 placeholder="选择注册来源"
               >
                  <el-option
                   :key="item"
                   :label="item"
                   :value="item"
                 ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item  prop="province">
                <el-select
                 class="filter-item"
                 style="width: 180px;"
                 v-model="requestParameters.province"
                 @keyup.enter="handleFilter"
                 filterable
                 placeholder="选择登录方式"
               >
                  <el-option
                   :key="item"
                   :label="item"
                   :value="item"
                 ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="shortName">
                <el-input v-model="requestParameters.shortName"
                           placeholder="输入关键词"
                           style="width: 180px;">
                </el-input>
              </el-form-item>
            </el-col>
             <el-col :span="1">
               <el-form-item>
                 <el-button

                   type="primary"
                   icon="el-icon-search"
                   @click="handleFilter"
                   style="margin-left: -160px;"
                 >搜索</el-button>

               </el-form-item>
             </el-col>
             <el-col :span="1">
               <el-form-item>
                 <el-button
                  type="primary" plain
                  @click="handleFilter"
                  style="margin-left: -100px;"
                 >导出搜索结果</el-button>
               </el-form-item>
             </el-col>
           </el-row>
         </div>
       </el-form>
         <el-table
            :data="dataList"
            :key="tableKey"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            fit
            highlight-current-row
            style="width: 100%"
            border
          >
          <el-table-column align="center" label="用户名">
            <template slot-scope="scope">
              <span>
                <a href="#" target="_blank" class="buttonText">
                  {{scope.row.name}}
                </a>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="手机号">
            <template slot-scope="scope">
              <span>
                <a href="#" target="_blank" class="buttonText">
                  {{scope.row.name}}
                </a>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Email">
            <template slot-scope="scope">
              <span>课程已发布</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="注册时间">
            <template slot-scope="scope">
              <span>{{scope.row.createDate | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="最近登录">
            <template slot-scope="scope">
              <span>{{scope.row.createDate | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="200"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
            <el-link type="primary"
                    :underline="false"
                    @click="handleChange(scope.row.courseBaseId)">
                    查看
            </el-link>
            &nbsp;&nbsp;
            <el-link type="danger"
                    :underline="false"
                    @click="handleChange(scope.row.courseBaseId)">
                    封禁
            </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
      <div class="pagination">
          <div class="pages" style="float: right;margin-bottom: 20px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10,20,30,50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <coureseDialog ref="auditCourse" :titleInfo="titleInfo" :formBase="formData"  @newDataes="getList"></coureseDialog>
      </el-card>
    </div>
  </div>
</template>
<script>
import { list } from '@/api/xczx/courses'
import coureseDialog from './../components/course-audit'
var _this = null
export default {
  name: 'Courses',
  components: {
    coureseDialog
  },
  data() {
    return {
      audiStatus: '已提交',
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      alertText: '',
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      formData: {
        isFamous: '',
        shortName: '',
        company: '',
        tags: '',
        remarks: ''
      }
    }
  },
  computed: {
    status() {
      return status
    }
  },
  methods: {
    // 初始数据
    initialDate() {
      // 读取数据
      this.getList()
    },
    change(data) {
      this.audiStatus = data
    },
    // 获取列表数据
    async getList(params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 重置
    resetForm() {
      this.$refs['requestParameters'].resetFields()
    },
    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.getList()
    },
    // **********************************
    // 搜索的项目
    // 添加、编辑之后表单清空
    query() {
      this.formData = {}
    },
    // 课程审核
    handleChange(id) {
      this.query()
      this.$refs.auditCourse.dialogFormV()
      this.titleInfo.text = '课程审核'
      this.hanldeEditForm(id)
    },
    // 窗口操作**********************************
    // 课程审核
    async hanldeEditForm(objeditId) {
      this.formData.courseBaseId = objeditId
    },
    // 启用、禁用
    handleStatus(val) {
      var status = ''
      if (val.state === true) {
        val.state = 0
        status = '禁用'
      } else {
        val.state = 1
        status = '启用'
      }
      var data = {
        id: val.id,
        state: val.state
      }
      this.$confirm('已成功' + status + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await disabled(data)
            .then(response => {
              this.$message.success('已成功' + status + '!')
              this.getList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error(status + '失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }
  },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created() {
    var _this = this
    this.initialDate()
    // 键盘enter操作
    document.onkeydown = function(e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  // 组件更新
  updated: function() {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
